<template>
  <div class="consultation">
    <div class="echarts-block">
      <div id="pie"></div>
      <el-radio-group
        v-model="type"
        style="margin-left: 10%;"
        @change="refreshChart"
      >
        <el-radio label="star">按收藏量</el-radio>
        <el-radio label="sell">按销售量</el-radio>
      </el-radio-group>
      <div id="ticket"></div>
    </div>
  </div>
</template>

<script>
import { getFun } from "../service.js";
import * as echarts from "echarts";
export default {
  name: "home",
  mounted() {
    this.getData();
  },
  data() {
    return {
      totalFun: [],
      type: "star",
      ticketChart: {},
    };
  },
  methods: {
    getData() {
      getFun().then((res) => {
        this.totalFun = res.data;
        this.drawChart();

        this.$nextTick(() => {
          this.ticketChart = echarts.init(document.getElementById("ticket"));
          this.refreshChart();
        });
      });
    },
    drawChart() {
      var pie = echarts.init(document.getElementById("pie"));
      // 绘制图表
      pie.setOption({
        title: {
          text: "景点类型统计",
          left: "center",
          top: 0,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "12%",
          left: "center",
        },
        series: [
          {
            name: "分类统计",
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.totalFun.filter((v) =>
                  v.funInfo.types.includes("运动保健型")
                ).length,
                name: "运动保健型",
              },
              {
                value: this.totalFun.filter((v) =>
                  v.funInfo.types.includes("游乐刺激型")
                ).length,
                name: "游乐刺激型",
              },
              {
                value: this.totalFun.filter((v) =>
                  v.funInfo.types.includes("观赏体验型")
                ).length,
                name: "观赏体验型",
              },
              {
                value: this.totalFun.filter((v) =>
                  v.funInfo.types.includes("文化休闲型")
                ).length,
                name: "文化休闲型",
              },
              {
                value: this.totalFun.filter((v) =>
                  v.funInfo.types.includes("室内消遣型")
                ).length,
                name: "室内消遣型",
              },
            ],
          },
        ],
      });
    },
    refreshChart() {
      console.log(this.totalFun)
      let sData = []
      if (this.type === "sell") {
        this.totalFun.forEach((v, i) => {
          let total = v.tickets.reduce((a, b) => {
            return a + b.count;
          }, 0)
          this.totalFun[i].total = total;
        })
        this.totalFun = this.totalFun.sort((a, b) => {
          return b.total - a.total;
        });
        sData = this.totalFun.map(v => v.total)
      } else {
        this.totalFun = this.totalFun.sort((a, b) => {
          return b.likes.length - a.likes.length;
        });
        sData = this.totalFun.map(v => v.likes.length)
      }
      let xData = this.totalFun.map((v) => v.funInfo.funName);
      
      // 按门票售卖统计
      this.ticketChart.setOption({
        title: {
          text: "景点热度统计",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: sData,
            type: "bar",
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.echarts-block {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;

  #pie,
  #ticket {
    width: 100%;
    height: 40vh;
  }
}
</style>
